<!-- 自定义下拉刷新与上拉加载演示(vue) -->
<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList" >
			<view slot="top">
				<view class="status_bar">
				  <!-- 这里是状态栏 -->
				</view>
				<view class="top">
					<view class="top-tool">
						<u-search placeholder="片名/演员" v-model="keyword" :animation="true" :clearabled="true" @focus="search()"></u-search>
					</view>
				</view>
				<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
				<u-tabs :list="tabslist" :is-scroll="true" name="type_name" :current="tabIndex" @change="tabChange" active-color="#46afec"></u-tabs>
			</view>
			
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<view class="item-list" style="display: flex; width: 100%;">
					<view class="item-title" style="width: 30%;">
						<view class="Imagebox">
							<image class="Image" 
							:src="item.vod_pic"
							mode="aspectFill"
							></image>
						
							<view class="topvip" v-if="item.videotype===1">
								<text class="top-text">VIP</text>
							</view>
							
							<view class="bottom">
								<text class="bottom-text">{{item.vod_remarks}}</text>
							</view>
						</view>
					</view>
					<view class="item-detail" style="width: 70%;">
						<view class="title" style="font-size: larger;color: #303133;margin-bottom: 20rpx;">
							{{item.vod_name}}
						</view>
						<view class="title">
							类型：{{item.vod_class}}
						</view>
						<view class="title">
							演员：{{item.vod_actor}}
						</view>
						<view class="title">
							描述：{{item.vod_blurb}}
						</view>
						<u-button class="bt" type="primary"  @click="itemClick(item)">立即播放</u-button>
					</view>
				</view>
				<view class="item-line"></view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				tabIndex: 0,
				keyword:'',
				type_id:0,
				tabslist: [
					{type_name: '全部'},
					{type_name: '电影'},
					{type_name: '电视剧'},
					{type_name: '综艺'},
					{type_name: '其他'},
				],
				current: 0
			}
		},
		onLoad(option) {
			let _that = this;
			_that.keyword = option.item;
			 this.getCatJieko();
			console.log(option)
		},
		methods: {
			async getCatJieko(){
				let tabslist=[];
				this.$http_request("/api.php/provide/cate/",{}).then(res=>{
					if(res.code==1){
						res.class[0]['type_name'] = "全部";
						this.tabslist = res.class;
					}
					uni.showLoading({
						title: '加载中',
						mask:true
					});
				})
				console.log("获取2")
			},
			search(){
				console.log(21231)
				uni.switchTab({
					url:'/pages/search/search?item='
				});	
			},
			tabChange(index) {
				this.tabIndex = index;
				this.type_id = this.tabslist[index]['type_id']
				//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				//调用reload时参数传true则代表reload时触发下拉刷新效果，不传或false则代表取消此效果
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
                    pg: pageNo,
					pageNo: pageSize,
					t:this.type_id,
					wd:this.keyword,
				}
				// console.log(32424)
				console.log(params)
				this.$http_request('/api.php/provide/vod/',params).then(res=>{
					if(res.code==1){
						console.log(res.list)
						this.$refs.paging.complete(res.list);	
					}else{
						this.$refs.paging.complete(false);
					}
				}).catch(res => {
					// console.log(43243254);
					this.$refs.paging.complete(false);
				})
			},
			itemClick(item) {
				uni.navigateTo({
					url:'/pages/detail/detail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style>
	.status_bar {
	  height: var(--status-bar-height);
	  width: 100%;
	  text-overflow: ellipsis; 
	}
	.top{
		height: 120rpx;
		display: flex;
		
	}
	.top-tool{
		line-height: 120rpx;
		width: 100%;
		margin: 0 40rpx;
	}
	
	.item {
		position: relative;
		height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}
	.bt{
		width: 240rpx;
		margin-top: 28rpx;
		margin-left: 0px;
	}

	.item-detail {
		padding: 5rpx 40rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #747d8c;
	}
	.item-detail .title{
		margin-bottom: 10rpx;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.bottom{
		position: absolute;
		bottom: 60rpx;
		color: white;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}

	.Imagebox .Image,image{
		height: 310rpx;
		border-radius: 8rpx;
		width: 222rpx;
		
	}
	 .topvip{
		position: absolute;
		top: 12rpx;
		right: 4rpx;
	}
</style>
